import React, { useState, useEffect } from "react";
import { Modal, Form, Input, Select, DatePicker } from 'antd';
import { allKind } from "@/common/api"


// 组件 props 类型定义
interface AddEditProps {
    visible: boolean;
    type: 'add' | 'edit';
    initialValues?: FormData;
    cancel: () => void;
    submit: (values: FormData) => void;
}

const AddEdit: React.FC<AddEditProps> = ({ visible, type, cancel, submit, initialValues }) => {

    useEffect(() => {
        getkind()
    }, []);
    const getkind = () => {
        allKind().then((res: any) => {
            if (res.success) {
                let data = res.data.map((i: any) => {
                    return {
                        label: i,
                        value: i
                    }
                })
                setKindData(data)
            }
        })
    }
    const [form] = Form.useForm();
    const [kindData, setKindData] = useState<any[]>([]);
    // 当编辑时设置默认值
    useEffect(() => {
        if (visible && initialValues) {
            form.setFieldsValue(initialValues);
        }
    }, [visible, initialValues, form]);
    const Onsubmit = () => {
        const values = form.getFieldsValue();
        values['needYearMonth'] = values['needYearMonth'] ? values['needYearMonth'].format('YYYYMM') : ''
        submit(values)
    };
    return (
        <>
            <Modal
                title={type === 'edit' ? '编辑' : '新增'}
                open={visible}
                onOk={Onsubmit}
                onCancel={cancel}
                width="40vw"
            >
                <div>
                    <Form form={form} autoComplete="off" labelAlign="right" labelCol={{ style: { width: 100, textAlign: 'right' } }} >
                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="needYearMonth" label="需求年月 :" style={{ flex: 1 }}>
                                <DatePicker picker="month" style={{ width: '100%' }} />
                            </Form.Item>

                            <Form.Item name="facilityType" label="设备分类:" style={{ flex: 1 }}>
                                <Select
                                    style={{ width: '100%' }}
                                    options={kindData}
                                    placeholder="请选择设备分类"
                                />
                            </Form.Item></div>


                        <Form.Item name="liftUnit" label="提报单位:" >
                            <Input placeholder="请输入提报单位" />
                        </Form.Item>

                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="needLiftNum" label="需求提报量(只):" style={{ flex: 1 }}>
                                <Input placeholder="请输入需求提报量" />
                            </Form.Item>

                            <Form.Item name="monthUseNum" label="本月使用量(只):" style={{ flex: 1 }}>
                                <Input placeholder="请输入本月使用量" />
                            </Form.Item>
                        </div>

                        <div style={{ display: 'flex', gap: '20px' }}>
                            <Form.Item name="addNum" label="增量(只):" style={{ flex: 1 }}>
                                <Input placeholder="请输入增量" />
                            </Form.Item>

                            <Form.Item name="residueNum" label="剩余量(只):" style={{ flex: 1 }}>
                                <Input placeholder="请输入剩余量" />
                            </Form.Item>
                        </div>

                        <Form.Item name="facilityCode" label="设备码:">
                            <Input placeholder="请输入设备码" />
                        </Form.Item>

                        <Form.Item name="codeDescribe" label="设备码描述:">
                            <Input.TextArea placeholder="请输入设备码描述" />
                        </Form.Item>
                    </Form>
                </div>

            </Modal >
        </>
    );

}


export default AddEdit
